London | Shohreh Bayat | Form-control | Week 2 #303
Conversation
✅ Deploy Preview for cyf-ufd ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| </div> | ||
| <div> | ||
| <label for="email">Email</label> | ||
| <input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" id="email" placeholder="Enter Your e-mail" required> |
There was a problem hiding this comment.
Well done on using the regex pattern! 👏 Regex in general is a really big subject, and it goes very deep and can be used to create very complicated and sometimes very useful checks.
If you want to learn more on Regex - I really like Corey Schafer's explanation - he has his Youtube channel, and even though his channel is primarily geared towards Python (One of the best languages out there!! 😊), his Regex explanation is pretty much language agnostic. So you can follow it on your own time, at your own pace.
| <input type="email" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" id="email" placeholder="Enter Your e-mail" required> | ||
| </div> | ||
| <div> | ||
| Choose your T-shirt's colour |
There was a problem hiding this comment.
In Web Development, there's a very big and important topic called Accessibility.
I have linked you a documentation found on MDN Web Docs. For all things Web Development & JavaScript, MDN documentation will generally be your best friend, you can find so much there and the information there is the best! My recommendation would be, if you are unsure of smth, always check MDN docs, it has the most up-to-date and useful information with regards to Web Development (and not only) 😊
So having said this, you can use some Semantic HTML to let the users using screen readers know how everything on the website is organised and structured.
So considering the T shirt colour option for the user, you can technically wrap radio buttons in a fieldset with a legend tags, to provide more context for the users with screen readers.
Semantic elements and a better organised HTML structure, can also improve website's SEO, which is a big topic on its own and you can read more on it in your own time. SEO is generally used heavily in marketing, but we as developers have to do our best to help better optimise our website!
| Choose your T-shirt's colour | ||
| <div> | ||
| <label for="Red">Red</label> | ||
| <input type="radio" name="colour" id="Red" value="Red" required> |
There was a problem hiding this comment.
When it comes to HTML attributes and conventions around naming, it's generally better to use lower case, as opposed to having Capitalisation in your attributes.
So generally id="size" and name="size" will improve consistency, readability and will follow HTML conventions, which will make other developers love your work ethic 🥳
Here's a W3Schools short guide on HTML attributes.
| </div> | ||
| Choose your T-shirt's Size | ||
| <div> | ||
| <label for="Size">T-shirt's Size</label> |
There was a problem hiding this comment.
Same here, you could use a better semantic approach to better structure your HTML markup.
giorgigutsaevi
added
Reviewed
There was a problem hiding this comment.
Nice one! 🎉 Congrats on completing this!
You have showcased a solid understanding of HTML & CSS which is the foundation of great User Experience (or UX in short) in modern Web Development.
My humble advice would be for you to get familarised with the topics of Accessibility and Semantics and how they come into play. The general goal is to make the website as easy-to-use for the users as possible. So, having said this, following Accessibility conventions and patterns will eventually prove to make your website better-optimised and ultimately a great user experience, which is paramount and very important in our field.
You can make use of the Lighthouse, it's a tool built by Google devs to run performance, accessibility and SEO checks against your website and once it's done, it will analyse your website and give you a score. It also gives you some recommendations based on your codebase, and is an amazing tool to make your website run smooth 😊
There are other tools similar like Lighthhouse, I will leave that research up to you :)
Shohreh-bayat
added
Complete
Learners, PR Template
Self checklist
Changelist
Briefly explain your PR.
Questions
Ask any questions you have for your reviewer.